<template>
  <div class="dialog">
    <div class="loginPage">
      <el-form ref="AccountFrom" :model="account" :rules="rules">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="username">
          <el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
        <el-form-item>
          <el-button type="primary" @click.native.prevent="handleLogin">登录</el-button>
          <el-button type="primary" @click.native.prevent="handleLogin">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: 'HelloWord',
    data() {
      return {
        account: {
          username: "admin",
          pwd: "123456"
        },
        rules: {
          username: [
            {required: true, message: "请输入账号", trigger: "blur"}
          ],
          pwd: [
            {required: true, message: "请输入密码", trigger: "blur"}
          ]
        },
        checked: true
      };
    },
    methods: {
      handleLogin() {
        this.$refs.AccountFrom.validate(valid => {
          if (valid) {
            var loginParams = {
              username: this.account.username,
              password: this.account.pwd
            };
            axios
              .post("/api/User", loginParams)
              .then(m => {
                if (m.data.code == "001") {
                  this.$router.push({path: "/work"});
                } else {
                  this.$message({
                    message: m.data.msg,
                    type: "error"
                  });
                }
              })
              .catch(m => console.log(m));
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    }
  };
</script>
<!--阿斯达123123-->
<style scoped>
  html, body {
    margin: 0;
    padding: 0;
    position: relative;
  }

  .dialog {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
  }

  .loginPage {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -175px;
    width: 350px;
    min-height: 300px;
    padding: 30px 20px 20px;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #fff;
  }

  .loginPage p {
    color: red;
    text-align: left;
  }
</style>
